import {getUserCountsAPI, getUserInfoAPI} from "../../api"
import React, {useEffect, useState} from "react"
import {View, Text, StyleSheet, Image, TouchableOpacity} from "react-native"
import LinearGradient from "react-native-linear-gradient"
import {UserCountsResult, UserInfoResult} from "types/user"
import {useTHNavigation} from "../../utils/navigation"

const defaultAvatar = "https://img.yzcdn.cn/vant/cat.jpeg"

const menuList = [
  {icon: require("../../res/dongtai.png"), label: "我的动态"},
  {icon: require("../../res/shui.png"), label: "谁看过我"},
  {icon: require("../../res/tong.png"), label: "通用设置"},
  {icon: require("../../res/kefu.png"), label: "客服在线"},
]

export default function MyPage() {
  const [userInfo, setUserInfo] = useState<UserInfoResult>({} as UserInfoResult)
  const navigation = useTHNavigation()
  const [counts, setCounts] = useState<UserCountsResult>([
    {
      type: "fanCount",
      cout: 1,
    },
    {type: "loveCount", cout: 1},
    {type: "eachLoveCount", cout: 1},
  ])
  useEffect(() => {
    getUserInfo()
    getUserCounts()
  }, [])

  const getUserCounts = async () => {
    const res = await getUserCountsAPI()
    setCounts(res)
  }
  const getUserInfo = async () => {
    setUserInfo(await getUserInfoAPI())
  }
  const handleSetting = (item: any) => {
    if (item.label === "通用设置") {
      navigation.push("Settings")
    }
  }
  return (
    <View style={styles.container}>
      {/* 顶部渐变背景 */}
      <LinearGradient
        colors={["#7B5FFF", "#01C8FF"]}
        start={{x: 0, y: 0}}
        end={{x: 1, y: 1}}
        style={styles.headerBg}>
        <View style={styles.headerContent}>
          <Image
            source={{uri: userInfo.header || defaultAvatar}}
            style={styles.avatar}
          />
          <TouchableOpacity onPress={() => navigation.push("UserInfo")}>
            <View style={styles.info}>
              <View style={{flexDirection: "row", alignItems: "center"}}>
                <Text style={styles.nickName}>
                  {userInfo.nick_name || "佚名"}
                </Text>
                <View style={styles.ageGender}>
                  <Text style={styles.ageText}>🎂{userInfo.age}</Text>
                  <Text style={styles.genderText}>
                    {userInfo.gender === "女" ? "♀" : "♂"}
                  </Text>
                  <View style={styles.fateValue}>
                    <Text style={styles.fateValueText}>50</Text>
                  </View>
                </View>
              </View>
              <Text style={styles.cityText}>📍{userInfo.city || "未知"}</Text>
            </View>
          </TouchableOpacity>
        </View>
      </LinearGradient>

      {/* 统计卡片 */}
      <View style={styles.statsCard}>
        <View style={styles.statItem}>
          <Text style={styles.statNum}>{counts[2].cout}</Text>
          <Text style={styles.statLabel}>互相关注</Text>
        </View>
        <View style={styles.statItem}>
          <Text style={[styles.statNum, {color: "#FE5072"}]}>
            {counts[1].cout}
          </Text>
          <Text style={styles.statLabel}>喜欢</Text>
        </View>
        <View style={styles.statItem}>
          <Text style={styles.statNum}>{counts[0].cout}</Text>
          <Text style={styles.statLabel}>粉丝</Text>
        </View>
      </View>

      {/* 功能列表 */}
      <View style={styles.menuList}>
        {menuList.map(item => (
          <TouchableOpacity
            key={item.label}
            style={styles.menuItem}
            onPress={() => handleSetting(item)}>
            <Image source={item.icon} style={styles.menuIcon} />
            <Text style={styles.menuLabel}>{item.label}</Text>
            <Text style={styles.menuArrow}>›</Text>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: "#F5F6FA"},
  headerBg: {
    height: 180,
    borderBottomLeftRadius: 24,
    borderBottomRightRadius: 24,
    paddingHorizontal: 20,
    justifyContent: "flex-end",
    paddingBottom: 20,
  },
  headerContent: {flexDirection: "row", alignItems: "center"},
  avatar: {
    width: 64,
    height: 64,
    borderRadius: 32,
    marginRight: 16,
    borderWidth: 2,
    borderColor: "#fff",
  },
  info: {flex: 1},
  nickName: {fontSize: 20, color: "#fff", fontWeight: "bold"},
  ageGender: {flexDirection: "row", alignItems: "center", marginLeft: 8},
  ageText: {color: "#fff", fontSize: 14, marginRight: 4},
  genderText: {color: "#fff", fontSize: 14, marginRight: 4},
  fateValue: {
    backgroundColor: "#fff",
    borderRadius: 10,
    paddingHorizontal: 8,
    marginLeft: 4,
  },
  fateValueText: {color: "#FE5072", fontWeight: "bold"},
  cityText: {color: "#fff", fontSize: 14, marginTop: 4},
  statsCard: {
    backgroundColor: "#fff",
    borderRadius: 16,
    marginHorizontal: 16,
    marginTop: -10,
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: {width: 0, height: 2},
    shadowOpacity: 0.08,
    shadowRadius: 4,
    paddingVertical: 18,
  },
  statItem: {alignItems: "center", flex: 1},
  statNum: {fontSize: 20, fontWeight: "bold", color: "#333"},
  statLabel: {fontSize: 13, color: "#888", marginTop: 4},
  menuList: {
    marginTop: 24,
    backgroundColor: "#fff",
    borderRadius: 16,
    marginHorizontal: 16,
    paddingVertical: 8,
  },
  menuItem: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 16,
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#F0F0F0",
  },
  menuIcon: {width: 24, height: 24, marginRight: 16},
  menuLabel: {flex: 1, fontSize: 16, color: "#333"},
  menuArrow: {color: "#ccc", fontSize: 20},
})
